<template>
  <a-row class="login">
    <!-- 设置分4段，offset是偏移 9 -->
    <a-col :span="6" :offset="9" class="login-main" flex="auto">
      <h1 style="text-align: center"><rocket-two-tone />&nbsp;12306售票系统</h1>
      <a-form
        :model="loginForm"
        name="basic"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label=""
          name="mobile"
          :rules="[{ required: true, message: 'Please input your mobile!' }]"
        >
          <a-input v-model:value="loginForm.mobile" />
        </a-form-item>

        <a-form-item
          label=""
          name="code"
          :rules="[{ required: true, message: 'Please input your code!' }]"
        >
          <a-input v-model:value="loginForm.code">
            <template #addonAfter>
              <a @click="sendCode">获取验证码</a>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100%"
            >Submit</a-button
          >
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>
<script setup>
import { reactive } from "vue";
import axios from "axios";
import { notification } from "ant-design-vue";
import { useRouter } from "vue-router";
import store from "@/store";

const router = useRouter();
const loginForm = reactive({
  mobile: "12341234123",
  code: "",
});
const onFinish = () => {
  axios.post("/member/member/login", loginForm).then((response) => {
    let data = response.data;
    if (data.success) {
      notification.success({ description: "登录成功！" });
      router.push("/welcome");
      // 提交 方法名，传递的变量
      store.commit("setMember", data.content);
    } else {
      notification.error({ description: data.message });
    }
  });
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const sendCode = () => {
  axios
    .post("/member/member/send-code", {
      mobile: loginForm.mobile,
    })
    .then((response) => {
      let data = response.data;
      if (data.success) {
        notification.success({ description: "发送验证码成功！" });
        loginForm.code = "8888";
      } else {
        notification.error({ description: data.message });
      }
    });
};
</script>

<style>
.login-main h1 {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 50px;
}
.login-main {
  margin-top: 250px;
  padding: 30px 30px 20px;
  border: 2px solid grey;
  border-radius: 10px;
  background-color: #fcfcfc;
}
</style>
@/store
